<template>
  <slide-view
    :listener-ids="listenerIDs"
    :no-listener-ids="noListenerIDs"
    :no-listener-class="noListenerClass"
    :body-style="{ padding: 0, height: '100%' }"
    xs-empty-icon="nopermission"
    xs-empty-text="暂无权限"
    @afterEnter="viewAfterEnter"
    @close="hideView"
  >
    <div v-loading="loading" ref="crmDetailMain" class="detail-main">
      <flexbox direction="column" align="stretch" class="d-container">
        <!-- <c-r-m-detail-head
          :detail="detailData"
          :head-details="headDetails"
          :id="id"
          :crm-type="crmType"
          @handle="detailHeadHandle"
          @close="hideView"> -->
        <template slot="name">
          <el-tooltip
            :content="detailData.star == 0 ? '添加关注' : '取消关注'"
            effect="dark"
            placement="top"
          >
            <i
              :class="{ active: detailData.star != 0 }"
              class="wk wk-focus-on focus-icon"
              @click="toggleStar()"
            />
          </el-tooltip>
        </template>
        <!-- </c-r-m-detail-head> -->
        <examine-info
          v-if="detailData.examineRecordId"
          :id="id"
          :record-id="detailData.examineRecordId"
          :owner-user-id="detailData.putinUserId"
          class="examine-info"
          examine-type="crm_receivables"
          @on-handle="examineHandle"
        />
        <div class="d-container-bd">
          <el-tabs
            v-model="tabCurrentName"
            type="border-card"
            class="d-container-bd--left"
          >
            <el-tab-pane
              v-for="(item, index) in tabNames"
              :key="index"
              :label="item.label"
              :name="item.name"
              lazy
            >
              <div class="paramsBox" v-if="item.name == 'CRMEditBaseInfo'">
                <div
                  data-v-a3627968=""
                  class="section-mark"
                  style="
                    border-left-color: rgb(35, 98, 251);
                    clear: both;
                    height: 18px;
                  "
                >
                  <h3
                    style="
                      padding-bottom: 5px;
                      margin-bottom: 15px;
                      margin-left: 8px;
                    "
                  >
                    合伙人信息
                  </h3>
                </div>

                <div>
                  合伙人名称:<span style="margin-left: 10px">{{
                    detailData.deptName
                  }}</span>
                </div>
                <div
                  data-v-a3627968=""
                  class="section-mark"
                  style="
                    border-left-color: rgb(35, 98, 251);
                    clear: both;
                    height: 18px;
                  "
                >
                  <h3
                    style="
                      padding-bottom: 5px;
                      margin-bottom: 15px;
                      clear: both;
                      margin-left: 8px;
                    "
                  >
                    充值信息
                  </h3>
                  <br />
                </div>
                <div style="float: left">
                  充值金额：<span style="margin-left: 10px"
                    >￥{{ detailData.topUpPrice }}元</span
                  >
                </div>
                <div style="float: left">
                  充值渠道：<span style="margin-left: 10px"
                    >{{ detailData.rechargeSource }}</span
                  >
                </div>
                <div style="float: left">
                  充值时间：<span style="margin-left: 10px">{{
                    detailData.topUpDate
                  }}</span>
                </div>
                <div
                  data-v-a3627968=""
                  class="section-mark"
                  style="
                    border-left-color: rgb(35, 98, 251);
                    clear: both;
                    height: 18px;
                  "
                >
                  <h3
                    style="
                      padding-bottom: 5px;
                      margin-bottom: 15px;
                      clear: both;
                      margin-left: 8px;
                    "
                  >
                    系统信息
                  </h3>
                  <br />
                </div>
                <div style="float: left">
                  创建人:<span style="margin-left: 10px">{{
                    detailData.createUserName
                  }}</span>
                </div>
                <div style="float: left">
                  创建时间:<span style="margin-left: 10px">{{
                    detailData.createTime
                  }}</span>
                </div>
              </div>
              <div v-if="item.name == 'RelativeFiles'" class="fujian">
                <div class="fujian_list fujian_title">
                  <p>附件名称</p>
                  <p>附件大小</p>
                  <p>上传人</p>
                  <p>上传时间</p>
                  <p>来源</p>
                  <p>操作</p>
                </div>
                <div class="fujian_null" v-if="fileList.length <= 0">
                  暂无数据
                </div>
                <div class="fujian_list" v-else>
                  <div
                    v-for="(item, index) in fileList"
                    :key="index"
                    class="fujian_item"
                  >
                    <p>{{ item.name || "无" }}</p>
                    <p>{{ item.size || "0kb" | formatbytes }}</p>
                    <p>{{ detailData.putinUserName }}</p>
                    <p>{{ detailData.putinFormDate }}</p>
                    <p>{{ detailData.putinPlatform }}</p>
                    <p>
                      <span class="option_btn" @click="perviewClick(item,index)"
                        >预览</span
                      >
                      <span class="option_btn" @click="downloadClick(item)"
                        >下载</span
                      >
                    </p>
                  </div>
                </div>
              </div>
              <div v-if="item.name == 'RelativeHandle'">
                <div
    v-loading="loading"
    v-empty="list"
    class="rc-cont"
    style="padding-right:10%;min-height:500px;">
    <flexbox
      v-for="(item, index) in list"
      :key="index"
      class="ha-cont"
      align="stretch"
      justify="flex-start">
      <div class="ha-week">{{ item.createTime|filterTimestampToFormatTime('MM-DD dddd') }}</div>
      <div class="ha-circle"/>
      <div class="ha-time">{{ item.createTime|filterTimestampToFormatTime('HH:mm') }}</div>
      <xr-avatar
        :name="item.realname"
        :id="item.createUserId"
        :size="30"
        :src="item.img"
        :disabled="false"
        class="ha-img" />
      <div class="ha-name">{{ item.realname }}</div>
      <div class="ha-content">
        <p
          v-for="(info, infoIndex) in item.content"
          :key="infoIndex">{{ info }}</p>
      </div>
      <div class="ha-line"/>
    </flexbox>
  </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </flexbox>
    </div>
  </slide-view>
</template>

<script>
import { crmAllianceBusinessQueryByIdAPI } from "@/api/crm/allianceBusiness";
import SlideView from "@/components/SlideView";
import CRMEditBaseInfo from "@/views/crm/components/CRMEditBaseInfo"; // 基本信息
import RelativeFiles from "@/views/crm/components/RelativeFiles"; // 相关附件
import RelativeHandle from "@/views/crm/components/RelativeHandle"; // 相关操作
import RelativePrint from "@/views/crm/components/RelativePrint"; // 相关打印
// import CRMAllCreate from '../components/CRMAllCreate' // 新建页面
import ExamineInfo from "@/components/Examine/ExamineInfo";
import { crmIndexFieldRecordAPI } from '@/api/crm/common'
import DetailMixin from "@/views/crm/mixins/Detail";
import {
  downloadFile,
  getFileIconWithSuffix,
  fileSize,
  canPreviewFile,
  wkPreviewFile,
} from "@/utils";

export default {
  // 学员管理 的 回款详情
  name: "RoiDetail",
  components: {
    SlideView,
    CRMEditBaseInfo,
    RelativeFiles,
    RelativeHandle,
    RelativePrint,
    ExamineInfo,
    // CRMAllCreate
  },
  mixins: [DetailMixin],
  props: {
    data: Object,

    // 详情信息id
    id: [String, Number],
    // 监听的dom 进行隐藏详情
    listenerIDs: {
      type: Array,
      default: () => {
        return ["crm-main-container"];
      },
    },
    // 不监听
    noListenerIDs: {
      type: Array,
      default: () => {
        return [];
      },
    },
    noListenerClass: {
      type: Array,
      default: () => {
        return ["el-table__body"];
      },
    },
  },
  data() {
    return {
      // 展示加载loading
      loading: false,
      crmType: "roiMoney",
      // 名称
      name: "",
      tabCurrentName: "CRMEditBaseInfo",
      // 编辑操作
      isCreate: false,
      fileList: [],
      detailData: {},
      tabsNumber: {},
      headDetails: [
        { title: "姓名", value: "" },
        { title: "线索来源", value: "" },
        { title: "手机", value: "" },
        { title: "负责人", value: "" },
        { title: "创建时间", value: "" },
      ],
      list: [],
      fileListLength: 0,
    };
  },
  computed: {
    tabNames() {
      var tempsTabs = [
        { label: "详细资料", name: "CRMEditBaseInfo" },
        {
          label:
            this.fileList.length == 0
              ? "附件 "
              : "附件(" + this.fileList.length + ")",
          name: "RelativeFiles",
        },
        { label: "操作记录", name: "RelativeHandle"}
      ];

      return tempsTabs;
    },
  },
  watch: {
    tabCurrentName(){
      if(this.tabCurrentName == 'RelativeHandle'){
        this.list = []
      this.getLogDetail()
      }
    }
  },
  filters: {
    formatbytes: function (bytes) {
      if (bytes === 0) return "0 B";
      var k = 1000, //1024
        sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
        i = Math.floor(Math.log(bytes) / Math.log(k));

      return (bytes / Math.pow(k, i)).toPrecision(3) + " " + sizes[i];
    },
  },
  mounted() {
    this.viewAfterEnter();
  },
  methods: {
    getLogDetail(loading = true) {
      this.loading = loading
      crmIndexFieldRecordAPI({
        types: 23,
        actionId: this.id
      })
        .then(res => {
          this.loading = false
          this.list = res.data.map(item => {
            item.createTime = new Date(item.createTime).getTime()
            return item
          })
        })
        .catch(() => {
          this.loading = false
        })
    },
    viewAfterEnter() {
      this.getDetial();
    },
    /**
     * 详情
     */
    getDetial() {
      this.loading = true;
      crmAllianceBusinessQueryByIdAPI(this.id)
        .then((res) => {
          this.loading = false;
          this.name = res.data.number;
          this.detailData = res.data;
          this.fileList = res.data.fileList;
          this.fileListLength = res.data.fileList.length;
        })
        .catch(() => {
          this.loading = false;
          this.hideView();
        });
    },
    //预览
    perviewClick(item,index) {
      if (canPreviewFile(item.name)) {
        wkPreviewFile(item.filePath || item.url, item.name);
      } else {
        this.$bus.emit("preview-image-bus", {
          index: index,
          data: this.fileList,
        });
      }
    },
    //下载
    downloadClick(item) {
      downloadFile({
        path: item.filePath || item.url,
        name: item.name,
      });
    },
    /**
     * 关闭
     */
    hideView() {
      this.$emit("hide-view");
    },

    // /**
    //  * 编辑成功
    //  */
    // editSaveSuccess() {
    //   this.$emit('handle', { type: 'save-success' })
    //   this.getDetial()
    // },

    /**
     * 审核操作
     */
    examineHandle() {
      this.$emit("handle", { type: "examine" });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/views/crm/styles/crmdetail.scss";
.paramsBox {
  padding: 30px;
}
.paramsBox div {
  width: 50%;
  /* float: left; */
  margin-bottom: 40px;
}
.fujian {
  margin: 30px 20px;
  border: 1px solid #e4e7ed;
  min-height: 400px;
}

.option_btn {
  color: #2362fb;
  cursor: pointer;
  margin-right: 10px;
}
.fujian_title {
  background: #f5f7fa;
}
.fujian_list {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  .fujian_item {
    display: flex;
    width: 100%;
    align-items: center;
  }
  p {
    flex: 1;
    height: 40px;
    line-height: 40px;
    text-align: left;
    padding-left: 15px;
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: nowrap; //溢出不换行
  }
}
.fujian_null {
  text-align: center;
  border-bottom: 1px solid #e4e7ed;
  height: 40px;
  line-height: 40px;
}
@import '../styles/relativecrm.scss';
.ha-cont {
  font-size: 12px;
  position: relative;
  line-height: 20px;
  min-height: 40px;
  padding-top: 3px;
  .ha-week {
    margin: 0 17px 0 10px;
    flex-shrink: 0;
    color: #333333;
    font-size: 13px;
    width: 80px;
  }
  .ha-time {
    padding: 0 10px 0 24px;
    flex-shrink: 0;
    color: #aaa;
  }
  .ha-circle {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    z-index: 2;
    border-radius: 9px;
    background-color: white;
    border: 5px solid #a5ecd7;
    margin-right: 5px;
  }
  .ha-img {
    flex-shrink: 0;
    margin: -3px 10px 0 10px;
    display: block;
  }
  .ha-name {
    padding: 0 10px;
    flex-shrink: 0;
    color: #333;
    font-size: 14px;
  }
  .ha-content {
    padding: 0px 10px 10px 10px;
    flex: 1;
    color: #333;
    font-size: 13px;
  }
  .ha-line {
    position: absolute;
    z-index: 1;
    width: 1px;
    top: 3px;
    bottom: -3px;
    left: 115px;
    background-color: #e6e6e6;
  }
}
</style>
